---
title: Introduction
icon: Album
---
import Image from "next/image"

<div className="flex -mt-8 -mb-4">
    <Image src="/better-auth-ui-promo-dark.webp" priority width="2000" height="1338" alt="better-auth-ui" className="hidden dark:block" />
    <Image src="/better-auth-ui-promo-light.webp" priority width="2000" height="1338" alt="better-auth-ui" className="dark:hidden" />
</div>

`@daveyplate/better-auth-ui` provides ready-to-use shadcn/ui styled components for rapidly implementing authentication features in your Next.js and React applications, seamlessly integrating with [`better-auth`](https://better-auth.com).

## Why choose Better Auth UI?

- **Easy** – Plug & play authentication components.
- **Customizable** – Fully styled with TailwindCSS and shadcn/ui, easy to extend to your needs.
- **Robust** – Made with modern best practices, built to work seamlessly with existing React projects.

## Key Features

- Fully Responsive UI components
- TailwindCSS and shadcn/ui styling support
- First-class integration with [`better-auth`](https://better-auth.com)

## Screenshots

Below are examples of the components provided by `@daveyplate/better-auth-ui`.

<div className="grid grid-cols-2 gap-4">
    <div>
        ### Sign In
        <img alt="Sign In Dark" src="/screenshots/sign-in-dark.png" className="rounded-xl hidden dark:block w-sm mt-0 mb-0" />
        <img alt="Sign In Light" src="/screenshots/sign-in-light.png" className="rounded-xl dark:hidden w-sm mt-0 mb-0" />
    </div>
    <div>
        ### Sign Up
        <img alt="Sign Up Dark" src="/screenshots/sign-up-dark.png" className="rounded-xl hidden dark:block w-sm mt-0 mb-0" />
        <img alt="Sign Up Light" src="/screenshots/sign-up-light.png" className="rounded-xl dark:hidden w-sm mt-0 mb-0" />
    </div>
    <div>
        ### Forgot Password
        <img alt="Forgot Password Dark" src="/screenshots/forgot-password-dark.png" className="rounded-xl hidden dark:block w-sm mt-0 mb-0" />
        <img alt="Forgot Password Light" src="/screenshots/forgot-password-light.png" className="rounded-xl dark:hidden w-sm mt-0 mb-0" />
    </div>
    <div>
        ### User Button
        <div className="flex gap-2 mt-0">
            <img alt="Seto" src="/avatars/seto.png" className="size-8 rounded-full mt-0 mb-3" />
            <img alt="Seto" src="/avatars/dark.png" className="size-8 rounded-full hidden dark:block mt-0 mb-3" />
            <img alt="Seto" src="/avatars/light.png" className="size-8 rounded-full dark:hidden mt-0 mb-3" />
        </div>
        <div className="flex items-center gap-3">
            <img alt="Seto" src="/screenshots/user-button-dark.png" className="w-64 rounded-md hidden dark:block mt-0 mb-0" />
            <img alt="Seto" src="/screenshots/user-button-light.png" className="w-64 rounded-md dark:hidden mt-0 mb-0" />
        </div>
        <img alt="User Dropdown Dark" src="/screenshots/user-dropdown-dark.png" className="rounded-md border-r w-44 hidden dark:block mt-4 mb-0" />
        <img alt="User Dropdown Light" src="/screenshots/user-dropdown-light.png" className="rounded-md border-r w-44 dark:hidden mt-4 mb-0" />
    </div>

    <div>
        ### Email Template
        <img alt="Email Template Dark" src="/screenshots/email-template-dark.png" className="rounded-xl hidden dark:block w-sm mt-0 mb-0" />
        <img alt="Email Template Light" src="/screenshots/email-template-light.png" className="rounded-xl dark:hidden w-sm mt-0 mb-0" />
    </div> 

    <div>
        ### Settings Cards
        <img alt="Settings Cards Dark" src="/screenshots/settings-cards-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
        <img alt="Settings Cards Light" src="/screenshots/settings-cards-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />
    </div>
</div>

## Next Steps

Before starting the installation, please ensure you have everything that's required to integrate `@daveyplate/better-auth-ui` seamlessly.

- [Requirements](/getting-started/requirements)
- [Installation](/getting-started/installation)

## LLMS.txt

Better Auth UI provides an LLMs.txt file that helps AI models understand how to interact with your auth UI. You can find it at [https://better-auth-ui.com/llms.txt](https://better-auth-ui.com/llms.txt).